<template>
  <view class="box">
    <text @click="cliPause">{{ title }}</text>
    <button id="count" @click="count++">{{ count }}</button>
  </view>
</template>
<!-- setRecommendConfig -->
<script>
const { getPlayletManager } = tt;
export default {
  data() {
    return {
      pm: null,
      count: 0,
      title: "Hello player click me pause",
    };
  },
  props: ["titles"],
  async beforeCreate() {
    const pm = await getPlayletManager({
      is: "playler", // 和插槽同名
    });
    this.pm = pm;
    console.log(pm, this, "player_pm_this_beforeCreate");
    pm.onClickUnlock((e) => {
      pm.toggleCustomDialog();
    });
    pm.onPlay((e) => {
      console.error("触发开始播放onPlay回调:", e);
    });
    pm.onPause((e) => {
      console.log("触发暂停播放onPause回调:", e);
    });
    pm.onEnded(async (e) => {
      console.log("触发播放到末尾onEnded回调", e);
    });
    pm.onError((e) => {
      console.error("报错了 报错了", e);
    });
    // 播放进度变化时
    // pm.onTimeUpdate((e) => {
    //   // 播放进度变化时触发，返回当前播放时间点及视频总时长，单位：秒(s)。event.detail = { currentTime, duration }。
    //   console.log("触发播放进度变化onTimeUpdate回调:", e);
    // });

    pm.onWaiting((e) => {
      console.log("触发视频出现缓冲onWaiting回调:", e);
    });

    pm.onPlayBackRateChange((e) => {
      console.log("触发视频倍速改变onPlayBackRateChange回调:", e);
    });

    pm.onLoadedMetaData((e) => {
      console.log("触发视频元数据加载完成onLoadedMetaData回调:", e);
    });

    pm.onSeekComplete((e) => {
      console.log("触发seek完成onSeekComplete回调:", e);
    });

    pm.onMuteChange((e) => {
      console.log("触发静音状态改变onMuteChange回调:", e);
    });

    pm.onControlTap((e) => {
      console.log("触发点击控件onControlTap回调:", e);
    });
    pm.onOpenCatalog((e) => {
      console.log("触发点击选集onOpenCatalog回调:", e);
    });

    // 推荐位使用简单示例
    pm.onChangeEpisode((e) => {
      console.log("触发选集切换onChangeEpisode回调:", e);
      pm.setRecommendConfig({
        entryType: 1,
        switchStatus: true,
        data: {
          albumId: "7349101834553786889",
          seq: 1,
        },
      });
      if (e.albumId === "7369150017635877413") {
        pm.setCatalog({
          freeList: [
            {
              start_episode_no: 1,
              end_episode_no: 5,
            },
          ],
          unlockList: [
            {
              start_episode_no: 6,
              end_episode_no: 10,
            },
            {
              start_episode_no: 16,
              end_episode_no: 20,
            },
          ],
          lockList: [
            {
              start_episode_no: 11,
              end_episode_no: 15,
            },
            {
              start_episode_no: 21,
              end_episode_no: 76,
            },
          ],
        });
      }
      if (e.albumId === "7349101834553786889") {
        pm.setCatalog({
          freeList: [
            {
              start_episode_no: 1,
              end_episode_no: 10,
            },
          ],
        });
      }
    });
    pm.onClickUnlock(function (e) {
      console.log("player解锁", e);
      pm.toggleCustomDialog();
    });
    pm.onTapCustomIcon((e) => {
      console.log("触发点击自定义组件onTapCustomIcon回调:", e);
    });
    pm.onTapShare((e) => {
      console.log("onTapShare", e);
      return {
        // 分享数据
        title: "测试小程序测试短剧onTapShare",
        desc: `这是默认的转发文案，用户可以直接发送，也可以在发布器内修改,分享的episodeId是 ${e.episodeId}`,
        path: `page/shortDramaMarket/playlet-plugin/index?tt_album_id=${e.albumId}&tt_episode_id=${e.episodeId}`, // ?后面的参数会在转发页面打开时传入onLoad方法
        imageUrl:
          "https://n.sinaimg.cn/sinakd20220105s/289/w945h944/20220105/d698-6b9d8808d51527dc9656b35e12b486ae.jpg", // 支持本地或远程图片，默认是小程序 icon
        templateId: "这是开发者后台设置的分享素材模板id",
      };
    });
    pm.onShareSuccess((e) => {
      console.log("分享成功onShareSuccess回调:", e);
    });
    pm.onShareFail((e) => {
      console.log("分享失败onShareSuccess回调:", e);
    });
  },
  created() {
    console.log("playerCreated");
  },
  beforeMount() {
    console.log("playerBeforeMount");
  },
  mounted() {
    console.log("playerMounted");
  },
  beforeUpdate() {
    console.log("playerBeforeUpdate");
  },
  updated() {
    console.log("playerUpdated");
    this.count % 2 == 0
      ? this.pm.setPlayStatus("play")
      : this.pm.setPlayStatus("pause");
  },
  beforeDestroy() {
    console.log("playerBeforeDestroy");
  },
  destroyed() {
    console.log("playerDestroyed");
  },
  methods: {
    cliPause: function () {
      console.error(this.$props);
      this.pm.setPlayStatus("pause");
      this.$emit("cliPause", 1);
    },
  },
};
</script>

<style>
.box {
  color: orange;
}
</style>
